<!--品牌列表-->
<template>
  <div>
    <h3>
      <p>
        <img :src="icon" style="width:29px ;padding-top:5px" />
        <i>热门品牌</i>
      </p>
    </h3>
    <ul>
      <router-link
        :to="{name:'homeSeach', params:{name:item.name}}"
        v-for="(item,index) in brands"
        :key="index"
      >
        <img :src="item.logo" alt="图片加载失败..." />
      </router-link>
    </ul>
  </div>
</template>
<script>
import icon from "@/assets/icon/pinpai.png"; // 楼层左侧图片
export default {
  name: "brand",
  props: {
    brands: Array
  },
  data() {
    return {
      icon
    };
  },
  // created(){
  //   console.log('brand子组件创建',this.brands)
  // },
  // mounted(){
  //    console.log('brand子组件挂载',this.brands)
  // }
};
</script>
<style lang="scss" scoped>
h3 {
  line-height: 40px;
  padding: 0 10px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  p {
    &:last-child {
      cursor: pointer;
    }
    .more {
      font-weight: normal;
      font-size: 12px;
    }
  }
}
// 后期删掉部分
div {
  width: 1200px;
  margin: auto;
  margin: 60px 0px;
}
// 后期删掉部分
ul {
  width: 1200px;
  // border-top: 1px solid #e8e8e8;
  // border-left: 1px solid #e8e8e8;
  border-bottom: none;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  a {
    box-sizing: border-box;
    width: 147.875px;
    height: 87.5px;
    // border-right: 1px solid #e8e8e8;
    // border-bottom: 1px solid #e8e8e8;
    // transition: 0.3s all ease-out;

    &:hover {
      opacity: 0.8;
      cursor: pointer;
      border: 3px solid #007ee6;
    }
    .el-image {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
